<script setup>
import { useLight, m, useObject } from "#imports";
import { useRoute } from "vue-router";
const route = useRoute();
const { data: obj } = await useObject({
  canUpdate: true,
  canDelete: true
});
const light = useLight();
const id = route.params.user_id;
const reset2fa = async () => {
  await light.dialog({
    title: "Reset 2FA",
    message: "Are you sure you want to reset 2FA?",
    color: "negative",
    ok: true,
    cancel: true
  }).onOk(async () => {
    try {
      await m("reset2FA", { id: parseInt(id) });
      light.notify({
        type: "positive",
        message: "2FA reset successfully"
      });
    } catch (e) {
      light.notify({
        type: "negative",
        message: e.message
      });
    }
  });
};
</script>

<template>
    <l-page :edit-btn="obj.canUpdate" v-if="obj">
        <template #header>
            <l-btn to="change-password" icon="sym_o_key" permission="user.change-password"
                label="Change password"></l-btn>
            <l-btn to="update-role" icon="sym_o_people" permission="user.role.add" label="Update role"></l-btn>
            <l-btn label="Reset 2FA" icon="sym_o_key" permission="user.reset2fa" @click="reset2fa"></l-btn>

        </template>

        <q-card flat bordered>
            <l-tabs inline-label align="justify">
                <l-tab name="overview" icon="sym_o_person" :label="$t('Overview')">
                    <l-user-overview :id="id" />
                </l-tab>
                <l-tab name="userlog" icon="sym_o_description" :label="$t('User log')"
                    v-if="$light.isGranted('user_log.list')">
                    <l-user-userlog :id="id" />
                </l-tab>
                <l-tab name="eventlog" icon="sym_o_description" :label="$t('Event log')"
                    v-if="$light.isGranted('event_log.list')">
                    <l-user-eventlog :id="id" />
                </l-tab>
            </l-tabs>

        </q-card>

    </l-page>
</template>
